import React, { useRef, useState, useEffect } from 'react';
import { connect, history } from 'umi';
import { Row, Col, Card, Tooltip, Button, Space, Modal, notification, Switch } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import ImagePreviewGroup from '@/components/DescriptionsCondition/ImagePreviewGroup';
import Indentation from '@/components/Indentation';
import TextareaModal from './components/TextareaModal';
import MessageAnswerModal from './components/MessageAnswerModal'
const AnsweringSelected = (props) => {
    const { loading, dispatch, list } = props;
    const childRef = useRef();
    const { location = {}, } = history
    const { query, pathname } = location
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const { accessId } = query
    const searchItems = [
        {
            label: '客户姓名或手机',
            name: 'userKeyword',
        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const getColumns = [

        {
            title: '客户名称',
            dataIndex: 'username',
        },
        {
            title: '头像',
            dataIndex: 'userProfile',
            render: (e) => {
                return <PopImgShow url={e}></PopImgShow>
            }
        },
        {
            title: '问题描述',
            dataIndex: 'content',
            render: (e) => {
                if (e) {
                    const {
                        text,
                    } = JSON.parse(e)
                    return <Indentation str={text}></Indentation>
                }
                return '--'
            }
        },
        {
            title: '问题描述图片',
            dataIndex: 'content',
            render: (e) => {
                if (e) {
                    const {
                        images,
                    } = JSON.parse(e)
                    return <div style={{ maxWidth: 240, overflowX: 'auto' }}>
                        <ImagePreviewGroup width={64} url={images}></ImagePreviewGroup>
                    </div>
                }
                return '--'
            }
        },
        {
            title: '查看次数',
            dataIndex: 'viewAmount',
            render: (e) => {
                return e || '--'
            }
        },
        {
            title: '点赞次数',
            dataIndex: 'likeAmount',
            render: (e) => {
                return e || '--'
            }
        },
        {
            title: '评论数',
            dataIndex: 'commentAmount',
            render: (e) => {
                return e || '--'
            }
        },
        {
            title: '回答数',
            dataIndex: 'answerAmount',
            render: (e, record) => {
                const { content } = record
                const {
                    text,
                } = JSON.parse(content)
                if (e) {
                    return <Button onClick={() => {
                        setVisible1({ show: true, detail: { ...record, text: text } })
                    }} type='link'>
                        {e}
                    </Button>
                }
                return '--'
            }
        },
        {
            title: '收藏数',
            dataIndex: 'collectAmount',
            render: (e) => {
                return e || '--'
            }
        },
        {
            title: '是否精选',
            dataIndex: 'handPickedFlag',
            render: (e, record) => {
                const { } = record
                return <Switch onChange={(val) => {
                    dispatch({
                        type: 'answering/fakeUserHelpQaChangeHandpicked',
                        payload: {
                            userQaId: record.id,
                            handPickedFlag: val ? '1' : '0',
                        },
                        callback: () => {
                            handleCallback()
                        }
                    })
                }} checked={e === '1'}></Switch >
            }
        },
    ];
    return <Card title={'互助答疑'}>
        <TableDataBlock
            searchItems={searchItems}
            cRef={childRef}
            loading={loading}
            columns={getColumns}
            rowKey={(e) => {
                return e.id
            }}
            dispatchType="answering/fetchUserHelpQaForAdmin"
            {...list}
        ></TableDataBlock>
        <TextareaModal handleCallback={handleCallback} onClose={() => setVisible(false)} visible={visible}></TextareaModal>

        <MessageAnswerModal handleCallback={handleCallback} onClose={() => setVisible1(false)} visible={visible1}></MessageAnswerModal>
    </Card>
}
export default connect(({ answering, loading }) => ({
    list: answering.userHelpQaList
}))(AnsweringSelected);
